<template>
  <d-drawer
    size="760px"
    class="leader-add-drawer"
    :api="api"
    :header="'生成邀请码'"
    v-model:visible="visible"
    v-model:data="formData"
    :rules="rules"
    :handleParams="handleParams"
  >
    <t-form-item label-width="150px" label="生成数量" name="count">
      <t-input-number
        theme="normal"
        class="input-title"
        clearable
        v-model="formData.count"
        placeholder="请输入数量"
      />
    </t-form-item>
    <t-form-item label-width="150px" label="粉丝邀请码" name="count">
      <t-radio-group v-model="formData.inviteCodeType">
        <t-radio value="1">是</t-radio>
        <t-radio value="0">否</t-radio>
      </t-radio-group>
    </t-form-item>
  </d-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { get } from '@common'
const api = 'basic/inviteCode/generateInviteCodes'
const INIT_STATUS = {
  count: '',
  inviteCodeType: '0'
}
const visible = ref(false)
const formData = ref({ ...INIT_STATUS })
const rules = computed(() => {
  return {
    count: [{ required: true, message: '请输入数量', trigger: 'change' }]
  }
})

const show = async (info = {}) => {
  formData.value = { ...INIT_STATUS }
  visible.value = true
}
const handleParams = (params) => {
  return {
    ...params
  }
}

defineExpose({ show })
</script>
<style lang="less">
.leader-add-drawer {
  .input-title {
    width: 400px;
  }

  .input-row-title {
    width: 120px;
    margin-right: 5px;
  }

  .remark-title {
    color: #999;
    font-size: 12px;

    &.require {
      margin: 20px 0 0 150px;
    }
  }

  .radio-title {
    width: 100px;
    display: inline-block;
  }
  .hideInput {
    .t-input__inner {
      opacity: 0;
    }
  }
}
</style>
